<template>
  <h1>个人简历练习</h1>
  <table border="1">
    <tr>
      <td>照片:</td>
      <td><img :src="person.imgUrl" width="100"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="fName in person.friends">{{fName}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadData()">点击加载数据</button>
</template>

<script setup>
  //准备一个空的person对象
  import {ref} from "vue";
  const person = ref({name: '', age: '', imgUrl: '', friends: []})
  const loadData = ()=>{
    person.value = {
      name: '传奇哥',
      age: 18,
      imgUrl: 'fcq.jpg',
      friends: ['张三', '李四', '王五', '赵六']
    }
  }
</script>

<style scoped>

</style>